iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

Flutter系列 第 12

Flutter基礎介紹與實作-Day12 Nice to Meet you Widgets-範例實作

  • 分享至 

  • xImage
  •  

前面講了那麼多關於Basic Widget今天我們就用其中一個來寫個小範例吧!


我們用BottomNavigationBar來寫一個關於卡片排版的小程式

我們可以使用Card Widget來做有圖片、標題和文字敘述的卡片模型
這邊有使用了一個AspectRatio的Widget,它是用來控制圖片的長寬比,像是我們這邊設定的是18:11,fit:BoxFit.fitWidth這行是為了讓image可以滿版呈現特別加上去的,下面一行的Padding它是設定圖片旁邊留白的地方,這4個數字分別代表圖片到上下左右邊框的距離,最下面的SizedBox是指文字間的距離
https://ithelp.ithome.com.tw/upload/images/20210926/20141032ZjQFxgMmmE.jpg

那上面設定完的卡片會有圓角、陰影,我們這樣執行完一個畫面只有一個卡片,這不是我們所希望的,所以我們要用GridView Widget,來做出可以上下滑動的Grid系統,甚至可以並排卡片
這裡的程式碼跟上面的差不多這裡就不多做解釋了,唯一要說的是crossAxisCount,這個是指每一個橫排要放幾張卡片
https://ithelp.ithome.com.tw/upload/images/20210926/2014103242iyz2slpr.jpg

成果
Women
https://ithelp.ithome.com.tw/upload/images/20210926/20141032QsyTvmkRd0.jpg

Men
https://ithelp.ithome.com.tw/upload/images/20210926/20141032oVUMGUEIwo.jpg

Kid
https://ithelp.ithome.com.tw/upload/images/20210926/201410324NWCDAz4tQ.jpg

完整程式碼


今日總結
今天這個小範例大家有學起來嗎?上面有附上完整的程式碼,有興趣的朋友都可以參考看看喔!


上一篇
Flutter基礎介紹與實作-Day11 Nice to Meet you Widgets(2)
下一篇
Flutter基礎介紹與實作-Day13 Onboarding、Login、Sign Up範例實作(1)
系列文
Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言